<!DOCTYPE html>
<html>
    <head>
        <script>
var xhttp = new XMLHttpRequest();
                        xhttp.onreadystatechange = function() {
                            if (this.readyState == 4 && this.status == 200) {
                                console.log(this.response);
                                let objJson = JSON.parse(this.response)
                                document.getElementById("device_id").innerHTML=objJson.data.deviceId;
                            }
                        }
                        xhttp.onerror = function(error) {
                            console.log("222");
                        };
                        xhttp.open("get", "../get?info=deviceInfo");
                        xhttp.send();
            </script>
        </head>
<title>OTA Server</title>
<br></br><h1 align="center">Device OTA</h1>
<br></br>
<table class="fixed" border="0" align="center" position="relative">
    <tr>
        <td>
            <table border="0" cellspacing="1" bordercolor="#e0e0e0" id="idtable" align="center" style="visibility:visible; border-collapse:separate; border-spacing:0px 20px;">
                <tr>
                    <td colspan="2" style="border-right:#cccccc solid 1px;border-left:#cccccc solid 1px;border-top:#cccccc solid 1px;border-bottom:#cccccc solid 1px;">
                        <input id="newfile" type="file" onchange="setpath()" style="width:100%;">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <p align="center" id="idtextaleart" style="visibility:hidden;color:rgb(6, 192, 183)";>√&nbsp&nbsp&nbsp&nbsp&nbspDevice upgrade OK!</p>
        </td>
    </tr>
    <tr>
        <td id="idprogress" colspan="2" align="left" style="visibility:hidden;">
            <div id="progress" style="width:0%;height:30px; background-color: #1E90FF; text-align: center;line-height: 30px; color:white; border-radius:80px">0%</div>
        </td>
    </tr>
    <td>
        <table border="0" cellspacing="1" bordercolor="#e0e0e0" id="idinfo" align="center" style="visibility:visible; border-collapse:separate; border-spacing:0px 20px;">
           
        </table>
    </td>
    
</table>
<script type='text/javascript'>            
function setpath() {
    upload()
}
function goprogress(){
    var pro = document.getElementById("progress"); 
    gotoend(pro,0);
}
function gotoend(pro,value){
    var value=value+1;
    //pro.value=value;
    pro.style.width = value + '%'; 
    pro.innerHTML=value * 1 + '%';

    if(value<100) {
        setTimeout(function(){gotoend(pro, value);},20)
    }
    else{
        document.getElementById("idprogress").style.visibility="hidden";
        document.getElementById("idtextaleart").style.visibility="visible";
    }
}
percent = 0;
function progressFunction(e) {
    var pro = document.getElementById("progress"); 
    if (e.lengthComputable) {
        percent = Math.round(e.loaded / e.total * 100);
        pro.style.width = percent + '%'; 
        pro.innerHTML = percent * 1 + '%';
    }
    if(percent >= 100)
    {
        document.getElementById("idprogress").style.visibility="hidden";
        document.getElementById("idtextaleart").style.visibility="visible";
    }
}
function upload() {
    var upload_path = "/update";
    var fileInput = document.getElementById("newfile").files;
    var progress_id = document.getElementById("idprogress");
    progress_id.style.visibility="visible";
    document.getElementById("idtable").style.visibility="hidden";
    var MAX_FILE_SIZE = 2*1024*1024;
    var MAX_FILE_SIZE_STR = "2MB";
    if (fileInput[0].size > 2*1024*1024) {
        alert("File size must be less than 2MB!");
    } else {
        document.getElementById("newfile").disabled = true;
        var file = fileInput[0];
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4) {
                if (xhttp.status == 200) {
                    document.open();
                    document.write(xhttp.responseText);
                    document.close();
                } else if (xhttp.status == 0) {
                    alert("Server closed the connection abruptly!");
                    location.reload()
                } else {
                    alert(xhttp.status + " Error!\n" + xhttp.responseText);
                    location.reload()
                }
            }
        };
        xhttp.upload.onprogress = progressFunction;
        xhttp.open("POST", upload_path, true);
        xhttp.send(file);
    }
}
</script>
</html>